<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商平台任务发布</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #e3f2fd 0%, #f8fbff 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px 0;
            display: flex;
            justify-content: center;
            min-height: 100vh;
        }
        
        .container {
            width: 750px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(33, 150, 243, 0.2);
            overflow: hidden;
            margin: 20px auto;
            position: relative;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(120deg, #2196F3, #0d47a1);
            color: white;
            padding: 30px 40px;
            position: relative;
            overflow: hidden;
            text-align: center;
        }
        
        .header::before {
            content: "";
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        .header::after {
            content: "";
            position: absolute;
            bottom: -80px;
            left: -30px;
            width: 150px;
            height: 150px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 50%;
        }
        
        .title {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 10px;
            position: relative;
            z-index: 2;
        }
        
        .subtitle {
            font-size: 18px;
            opacity: 0.9;
            max-width: 600px;
            position: relative;
            z-index: 2;
            margin: 0 auto;
        }
        
        /* 表单部分 */
        .form-container {
            padding: 30px 40px;
        }
        
        .form-section {
            margin-bottom: 30px;
            padding-bottom: 25px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .section-title {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
            font-size: 22px;
            font-weight: 700;
            color: #0d47a1;
        }
        
        .section-title i {
            background: #e3f2fd;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-right: 15px;
            color: #2196F3;
        }
        
        .form-group {
            margin-bottom: 22px;
            position: relative;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #37474F;
            font-size: 16px;
        }
        
        .form-control {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            font-size: 16px;
            transition: all 0.3s ease;
            background: #fafafa;
        }
        
        .form-control:focus {
            border-color: #2196F3;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
            outline: none;
        }
        
        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }
        
        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .form-col {
            flex: 1;
        }
        
        /* 阶段部分 */
        .stage {
            background: #f5fbff;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid #bbdefb;
            position: relative;
        }
        
        .stage-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .stage-number {
            background: #2196F3;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-weight: bold;
        }
        
        .remove-stage {
            margin-left: auto;
            background: #ffebee;
            border: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            color: #f44336;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .remove-stage:hover {
            background: #f44336;
            color: white;
        }
        
        /* 按钮部分 */
        .button-group {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }
        
        .btn {
            flex: 1;
            padding: 16px;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
        }
        
        .btn i {
            margin-right: 10px;
        }
        
        .btn-primary {
            background: linear-gradient(120deg, #2196F3, #0d47a1);
            color: white;
            box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4);
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(33, 150, 243, 0.6);
        }
        
        .btn-outline {
            background: transparent;
            color: #2196F3;
            border: 2px solid #2196F3;
        }
        
        .btn-outline:hover {
            background: rgba(33, 150, 243, 0.1);
        }
        
        .add-stage {
            width: 100%;
            padding: 14px;
            background: #e3f2fd;
            color: #2196F3;
            border: 2px dashed #90caf9;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 10px;
        }
        
        .add-stage:hover {
            background: #bbdefb;
        }
        
        /* 预览区域 */
        .preview-section {
            background: #f5fbff;
            border-radius: 15px;
            padding: 25px;
            margin-top: 30px;
            border: 1px solid #bbdefb;
        }
        
        .preview-title {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            color: #0d47a1;
        }
        
        .preview-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .preview-card {
            background: white;
            border-radius: 12px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        }
        
        .preview-value {
            font-size: 20px;
            font-weight: 700;
            color: #2196F3;
            margin-bottom: 5px;
        }
        
        .preview-label {
            font-size: 14px;
            color: #78909C;
        }
        
        .stage-list {
            margin-top: 20px;
        }
        
        .preview-stage {
            background: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .stage-info {
            flex: 1;
        }
        
        .stage-name {
            font-weight: 600;
            color: #37474F;
            margin-bottom: 5px;
        }
        
        .stage-desc {
            font-size: 14px;
            color: #78909C;
        }
        
        .stage-price {
            font-weight: 700;
            color: #2196F3;
            min-width: 80px;
            text-align: right;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                width: 95%;
                margin: 10px auto;
            }
            
            .header, .form-container {
                padding: 20px;
            }
            
            .title {
                font-size: 26px;
            }
            
            .form-row {
                flex-direction: column;
                gap: 0;
            }
            
            .preview-grid {
                grid-template-columns: 1fr;
            }
            
            .button-group {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 class="title">电商平台任务发布</h1>
            <p class="subtitle">创建您的开发任务，吸引优秀开发者参与</p>
        </div>
        
        <div class="form-container">
            <form id="taskForm">
                <!-- 任务基本信息 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-info-circle"></i>
                        <span>任务基本信息</span>
                    </div>
                    
                    <div class="form-group">
                        <label for="taskTitle">任务标题</label>
                        <input type="text" id="taskTitle" class="form-control" placeholder="例如：电商平台前端界面开发" value="网站前端界面设计与开发">
                    </div>
                    
                    <div class="form-group">
                        <label for="taskDesc">任务描述</label>
                        <textarea id="taskDesc" class="form-control" placeholder="详细描述您的任务需求...">我们需要为电商平台开发一个现代化的前端界面，要求使用React框架，响应式设计，并整合支付功能。需要完成首页、产品列表页、详情页和购物车页面。</textarea>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-col">
                            <div class="form-group">
                                <label for="totalAmount">总悬赏金额 (¥)</label>
                                <input type="number" id="totalAmount" class="form-control" value="12000">
                            </div>
                        </div>
                        <div class="form-col">
                            <div class="form-group">
                                <label for="stageCount">阶段数</label>
                                <input type="number" id="stageCount" class="form-control" value="3">
                            </div>
                        </div>
                        <div class="form-col">
                            <div class="form-group">
                                <label for="timeLimit">预计周期 (天)</label>
                                <input type="number" id="timeLimit" class="form-control" value="15">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 阶段设置 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-tasks"></i>
                        <span>悬赏阶段设置</span>
                    </div>
                    
                    <div id="stagesContainer">
                        <div class="stage">
                            <div class="stage-header">
                                <div class="stage-number">1</div>
                                <h3>阶段 #1</h3>
                                <button type="button" class="remove-stage">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            <div class="form-group">
                                <label>阶段名称</label>
                                <input type="text" class="form-control" value="需求分析与设计">
                            </div>
                            <div class="form-group">
                                <label>阶段金额 (¥)</label>
                                <input type="number" class="form-control" value="3000">
                            </div>
                            <div class="form-group">
                                <label>阶段描述</label>
                                <textarea class="form-control">完成需求文档和UI设计稿</textarea>
                            </div>
                        </div>
                        
                        <div class="stage">
                            <div class="stage-header">
                                <div class="stage-number">2</div>
                                <h3>阶段 #2</h3>
                                <button type="button" class="remove-stage">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            <div class="form-group">
                                <label>阶段名称</label>
                                <input type="text" class="form-control" value="核心功能开发">
                            </div>
                            <div class="form-group">
                                <label>阶段金额 (¥)</label>
                                <input type="number" class="form-control" value="6000">
                            </div>
                            <div class="form-group">
                                <label>阶段描述</label>
                                <textarea class="form-control">实现核心页面和功能模块</textarea>
                            </div>
                        </div>
                        
                        <div class="stage">
                            <div class="stage-header">
                                <div class="stage-number">3</div>
                                <h3>阶段 #3</h3>
                                <button type="button" class="remove-stage">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            <div class="form-group">
                                <label>阶段名称</label>
                                <input type="text" class="form-control" value="测试与交付">
                            </div>
                            <div class="form-group">
                                <label>阶段金额 (¥)</label>
                                <input type="number" class="form-control" value="3000">
                            </div>
                            <div class="form-group">
                                <label>阶段描述</label>
                                <textarea class="form-control">全面测试并交付完整项目</textarea>
                            </div>
                        </div>
                    </div>
                    
                    <button type="button" id="addStage" class="add-stage">
                        <i class="fas fa-plus-circle"></i> 添加新阶段
                    </button>
                </div>
                
                <!-- 预览区域 -->
                <div class="preview-section">
                    <div class="preview-title">
                        <i class="fas fa-eye"></i>
                        <h3 style="margin-left: 10px;">任务预览</h3>
                    </div>
                    
                    <div class="preview-grid">
                        <div class="preview-card">
                            <div class="preview-value">¥12,000</div>
                            <div class="preview-label">总悬赏金额</div>
                        </div>
                        <div class="preview-card">
                            <div class="preview-value">3</div>
                            <div class="preview-label">阶段数</div>
                        </div>
                        <div class="preview-card">
                            <div class="preview-value">15天</div>
                            <div class="preview-label">预计周期</div>
                        </div>
                    </div>
                    
                    <div class="stage-list">
                        <div class="preview-stage">
                            <div class="stage-info">
                                <div class="stage-name">需求分析与设计</div>
                                <div class="stage-desc">完成需求文档和UI设计稿</div>
                            </div>
                            <div class="stage-price">¥3,000</div>
                        </div>
                        <div class="preview-stage">
                            <div class="stage-info">
                                <div class="stage-name">核心功能开发</div>
                                <div class="stage-desc">实现核心页面和功能模块</div>
                            </div>
                            <div class="stage-price">¥6,000</div>
                        </div>
                        <div class="preview-stage">
                            <div class="stage-info">
                                <div class="stage-name">测试与交付</div>
                                <div class="stage-desc">全面测试并交付完整项目</div>
                            </div>
                            <div class="stage-price">¥3,000</div>
                        </div>
                    </div>
                </div>
                
                <!-- 按钮区域 -->
                <div class="button-group">
                    <button type="button" class="btn btn-outline">
                        <i class="fas fa-save"></i> 保存草稿
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-paper-plane"></i> 发布任务
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 添加阶段功能
            document.getElementById('addStage').addEventListener('click', function() {
                const stagesContainer = document.getElementById('stagesContainer');
                const stageCount = stagesContainer.children.length + 1;
                
                const newStage = document.createElement('div');
                newStage.className = 'stage';
                newStage.innerHTML = `
                    <div class="stage-header">
                        <div class="stage-number">${stageCount}</div>
                        <h3>阶段 #${stageCount}</h3>
                        <button type="button" class="remove-stage">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="form-group">
                        <label>阶段名称</label>
                        <input type="text" class="form-control" placeholder="输入阶段名称">
                    </div>
                    <div class="form-group">
                        <label>阶段金额 (¥)</label>
                        <input type="number" class="form-control" placeholder="输入金额">
                    </div>
                    <div class="form-group">
                        <label>阶段描述</label>
                        <textarea class="form-control" placeholder="描述阶段任务"></textarea>
                    </div>
                `;
                
                stagesContainer.appendChild(newStage);
                
                // 更新阶段数输入框
                document.getElementById('stageCount').value = stageCount;
                
                // 添加删除事件
                newStage.querySelector('.remove-stage').addEventListener('click', function() {
                    newStage.remove();
                    updateStageNumbers();
                    document.getElementById('stageCount').value = stagesContainer.children.length;
                });
            });
            
            // 删除阶段功能
            document.querySelectorAll('.remove-stage').forEach(button => {
                button.addEventListener('click', function() {
                    const stage = this.closest('.stage');
                    stage.remove();
                    updateStageNumbers();
                    document.getElementById('stageCount').value = document.querySelectorAll('.stage').length;
                });
            });
            
            // 更新阶段编号
            function updateStageNumbers() {
                document.querySelectorAll('.stage').forEach((stage, index) => {
                    const numberElement = stage.querySelector('.stage-number');
                    const titleElement = stage.querySelector('h3');
                    
                    if (numberElement) numberElement.textContent = index + 1;
                    if (titleElement) titleElement.textContent = `阶段 #${index + 1}`;
                });
            }
            
            // 表单提交
            document.getElementById('taskForm').addEventListener('submit', function(e) {
                e.preventDefault();
                alert('任务发布成功！即将跳转到任务详情页。');
                // 这里可以添加实际提交逻辑
            });
        });
    </script>
</body>
</html>